<template xmlns:el-col="http://www.w3.org/1999/html">
  <div style="margin-top: 70px" v-if="!isPC"></div>
  <el-row >
    <div style="display: flex;" class="thoughtwhole">

      <div style="float: left">
        <el-row>
          <el-col :span="24">
            <div style="display: block">
              <div style="display: flex;margin-left:-8px;margin-right:-8px;margin: 0;padding: 0">
                <div style="padding-left:8px;flex:1 1 auto;">
                  <div style="display: flex;align-items: center">
                    <h2 style="color: #c45656;display: flex;font-size: 40px;font-weight: bold">2024</h2>
                    <p style="color: #c45656;display: flex;font-size: 28px">年 万事兴龙</p>
                  </div>

                </div>
              </div>
              <div style="display: flex;margin-left:-8px;margin-right:-8px;margin: 0;padding: 0">
                <div style="padding-left:8px;flex:0 0 auto;">
                  <img :src="dragonLogo" width="120" style="border-radius: 20px;">
                </div>
                <div style="padding-left:8px;flex:0 0 auto;">
                  <p style="color: #409eff">辰龙</p>
                  <p style="color: #393a3b">出生日期</p>
                  <p style="color: #393a3b">2024.2.10-2025.1.28</p>
                  <p style="color: #393a3b">农历 甲辰年</p>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row style="90%">
          <el-col :span="24" >
            <el-calendar v-model="value" class="el-calendar-table el-calendar-day">
            </el-calendar>
          </el-col>
        </el-row>
      </div>

      <div style="float: left;" class="holidaytable">
        <div style="width: 100%;padding-top: 10px">
          <!--        #CA3A38-->
          <div style="background-color: #CA3A38;height: 50px;padding-left: 20px;padding-top: 1px;border-top-left-radius: 12px;border-top-right-radius: 12px">
            <p style="color: #fff;font-size: 20px;font-weight: bold">2024年放假安排</p>
          </div>
          <div class="holidaydecoration" >
            <p style="color: #fff;top: 0px;margin: 0;padding: 0;padding-left: 20px;font-size: 14px">国务院办公厅发布2024年放假安排</p>
            <el-table :data="holidays" style="width:95%;margin-top: 10px;border-radius: 12px;margin-left: 13px;">
              <el-table-column prop="name" label="节日" width="70"></el-table-column>
              <el-table-column prop="holiday" label="放假时间" width="125">
                <template #default="scope">
                  <p style="font-size: 10px">{{scope.row.holiday}}</p>
                </template>
              </el-table-column>
              <el-table-column prop="days" label="天数" width="60" v-if="this.$mhconfig.mechine === 'PC' || this.$mhconfig.mechine === 'desktopPC' || this.$mhconfig.mechine === 'pad' "></el-table-column>
              <el-table-column prop="holidaystatus" label="状态" width="60" v-if="this.$mhconfig.mechine === 'PC' || this.$mhconfig.mechine === 'desktopPC'|| this.$mhconfig.mechine === 'pad' "></el-table-column>
              <el-table-column  label="倒计时" width="160">
                <template #default="scope">
                  <div style="display: flex">
                    <div style="display: flex;align-items: center">
                      <svg t="1704440666632" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6232" width="20" height="20"><path d="M515 963c-59 0-119.1-11.7-177.2-36.2C144.8 845.3 33.4 636.9 73 431.3c24.6-127.8 99.1-234.8 209.9-301.2C392.1 64.6 524.5 48.6 646 86.2c191.7 59.4 321.4 240.7 315.5 441l-0.5 17.5-15.7 10.2c-9.9 5.9-22 6.4-32.3 1.3l-73.2-37c-15.8-8-22.2-27.3-14.2-43.1s27.3-22.2 43.1-14.2l26.8 13.5C880 324.1 775 193.2 626.9 147.4c-104.2-32.3-217.6-18.6-311.2 37.6C221 242 157.1 333.7 136 443.4c-33.9 176.1 61.5 354.5 226.8 424.3 185.6 78.4 396.3 3.9 490-173.2 8.3-15.7 27.7-21.6 43.4-13.3 15.6 8.3 21.6 27.7 13.3 43.4C829.4 875.8 676.2 963 515 963z m382.5-437.8v0z" fill="#FC592D" p-id="6233"></path><path d="M609.7 740.2c-8.2 0-16.4-3.1-22.7-9.4L445.6 589.4v-298c0-17.7 14.4-32.1 32.1-32.1s32.1 14.4 32.1 32.1v271.4l122.6 122.6c12.5 12.5 12.5 32.8 0 45.4-6.3 6.3-14.5 9.4-22.7 9.4z" fill="#FFCE00" p-id="6234"></path></svg>
                    </div>
                    <div style="display: flex;padding-left: 5px">
                      <!--                    <p>1055天08时45分05秒</p>-->
                      <p style="font-size: 12px">{{timeFormat(scope.row.lasttime)}}</p>
                    </div>

                  </div>
                </template>
              </el-table-column>

            </el-table>
          </div>

        </div>

      </div>

<!--      <div style="float: left;margin-top: 20px">-->
<!--        <div style="text-align: center">-->
<!--          <h2 >下班倒计时</h2>-->
<!--        </div>-->
<!--        <div style="display: flex">-->
<!--          <div class="workDecoraion" >-->
<!--            <p>{{timeFormatOffWork(offworklasttime)}}</p>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->


    </div>

  </el-row>



</template>

<script>
import {apiAcceptData} from "@/api";

export default {
  name: "YourThoughts",
  data(){
    return{
      dragonLogo:'http://t11.baidu.com/it/u=4048068730,1738585453&fm=58',
      holidays:[],
      value: new Date(),
      offworklasttime:0,
      isPC:true
    }
  },
  methods:{
    checkScreenWidth() {
      // 根据屏幕宽度判断是否为移动设备
      this.isPC = window.innerWidth <= 600; // 你可以根据实际需求设置阈值
      //
      // 根据设备的屏幕大小修改字体的大小
      const elements = document.querySelectorAll('.thoughtwhole');
      const holidaytable = document.querySelectorAll('.holidaytable');

      if( this.$mhconfig.mechine === 'PC' ) {// 台式电脑
        elements.forEach( ele =>{
          ele.style.flexDirection = 'row';
        })
      }else if(this.$mhconfig.mechine === 'desktopPC'){//笔记本电脑
        elements.forEach( ele =>{
          ele.style.flexDirection = 'row';
        })
      }else if(this.$mhconfig.mechine === 'pad'){//平板电脑
        elements.forEach( ele =>{
          ele.style.flexDirection = 'column';
        })
        holidaytable.forEach( ele =>{
          ele.style.marginTop= '310px';
          ele.style.width= window.innerWidth -20+'px';
        })
      } else { // 移动设备
        elements.forEach(ele => {
          ele.style.flexDirection = 'column';
        })
        holidaytable.forEach(ele => {
          ele.style.marginTop= '310px';
          ele.style.width= window.innerWidth -20+'px';

        })
      }


    },

    async getHolidays(){
      this.holidays = await apiAcceptData("/holiday/getHoliday",null)
      this.holidays.forEach((ele) => {
             // 调用定时器传递
             this.daojishi(ele)
      })

    },
    daojishi(row){
      //绑定倒计时计时器
      row.countDown = setInterval( () => {
        // 计算剩余时间戳
        let residue = new Date(row.startdate).getTime()- new Date();
        if(residue > 0){
          // 对每行的剩余时间进行设置
          row.lasttime = residue;
        }else{
          // 清除定时器
          clearInterval(row.countDown)
        }
      },1000) // 一秒钟运行一次
    },
    // 下班倒计时
    offworkCountdown(){
      const offworkCountdowna = setInterval( () => {

        let today = new Date();
        let swon = new Date( this.getCurrentTime()+" 08:30:00");
        let swoff =  new Date(this.getCurrentTime()+" 12:00:00");
        let xwon =  new Date(this.getCurrentTime()+" 14:00:00");
        let xwoff =  new Date(this.getCurrentTime()+" 18:00:00");
        let residue = 0;
        // 周末
        if(today.getDay() ===0 || today.getDay() === 6){
          residue = 0;
        }

        // 早上上班
        else if (swon - today < 0 && swoff - today > 0){
          residue =  swoff.getTime()-today;
        }
        else if(xwon - today < 0 && xwoff - today >0){
          residue =  swoff.getTime()-today;
        }else{
          residue = 0;
        }
        //  计算剩余时间戳
        // let residue =  new Date("2024-01-05 18:00:00").getTime()-new Date();
        if(residue > 0){
          // 对每行的剩余时间进行设置
          this.offworklasttime = residue;
        }else{
          // 清除定时器
          clearInterval(offworkCountdowna)
        }
      },1000) // 一秒钟运行一次
    },
    timeFormat(times){
      if(times === undefined){
        return ;
      }
      if(times > 0) {
        let days = this.addZero(Math.floor(times / 1000 / 60 / 60 /24)) ;// 天
        let hours = this.addZero(Math.floor((times / 1000 / 60 / 60) % 24 )); // 时
        let minutes = this.addZero(Math.floor((times / 1000 / 60) % 60)); // 分
        let seconds = this.addZero(Math.floor((times / 1000) % 60 ));//秒
        return days+'天'+hours+'时'+minutes+'分'+seconds+'秒'
      }else{
        return '0天0时0分0秒'
      }
    },
    timeFormatOffWork(times){
      if(times === undefined){
        return ;
      }
      if(times > 0) {
        let hours = this.addZero(Math.floor((times / 1000 / 60 / 60) % 24 )); // 时
        let minutes = this.addZero(Math.floor((times / 1000 / 60) % 60)); // 分
        let seconds = this.addZero(Math.floor((times / 1000) % 60 ));//秒
        return hours+'时'+minutes+'分'+seconds+'秒'
      }else{
        return '您已下班,请注意休息!'
      }
    },
    // 个位补零
    addZero(d){
      return parseInt(d) < 10 ? "0"+d : d;
    },
    // 获取当前系统时间
    getCurrentTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0');
      const day = String(now.getDate()).padStart(2, '0');
      // return new Date(`${year}-${month}-${day}`);
      return `${year}-${month}-${day}`;
  }
    // selectDate(CalendarDateType){
    //   if (CalendarDateType) return
    //   calendar.value.selectDate(CalendarDateType)
    // }

  },
  mounted() {
    // 在组件挂载后检查屏幕宽度
    this.checkScreenWidth();
    // 添加屏幕尺寸变化的事件监听器
    window.addEventListener('resize', this.checkScreenWidth);
  },
  created() {
     this.getHolidays();
     this.offworkCountdown()

  }
}
</script>

<style scoped>
 .holidaydecoration{
   background-color: #CA3A38;
   height: 78px;
   background-image:linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
   /*top: 0px;*/
   /*position: relative*/
 }
/* 修改日历*/
 .el-calendar{
   --el-calendar-cell-width:50px;
   /* 选中日期颜色 */
   --el-calendar-selected-bg-color:#CA3A38
 }
 .el-calendar-table{
   width: 100%;
   height: 50px !important;
   text-align: center;
 }
 .el-calendar-table td.is-today{
   color: #fff !important;
 }

 .el-calendar-day{
   width: 100%;
   height: 50px !important;
   text-align: center;
 }
 .workDecoraion{
   width:300px;
   height:100px;
   display: flex;
   flex: 1 1 auto;
   background-color: #1a1a1c;
   justify-content: center;
   align-items: center;
   margin-left: 10px;
   border-radius: 12px;
 }
 .workDecoraion p{
   color: #fff;
   font-size: 32px;
 }
</style>